<template>
  <div>
  <div class="yesTagsBox" v-for="(tags ,j) in tagsLists" :key="j">
    <template v-if="tags">
  <template v-for="(tagkey ,k ,i) in tags">
     <div class="yesTags" >
    <div class="title">{{k}}</div>
    <div class="tags">
      <div v-for="(item,index) in tags[k]" :key="index" class="tag">
        <span class="tag-name">{{item.tagsName}}</span>
        <div @click="delTags(item,index,tags,k,j)" class="tag-close el-icon-close"></div>
      </div>
    </div>
    <div class="tag-btn">
      <div class="update" @click="editTagList(tagkey ,k ,i,j)">修改</div>
      <div class="close" @click="delTagList(tagkey ,k ,i,j)">删除</div>
    </div>
     </div>
    </template>

  </template>
    </div>
      </div>
</template>

<script>
  import { tagsObjSwitch } from '@/utils/categoryOrTags'
export default {
  name: 'YesTags',
  props: ['tagsList','isSelect','id'],
  data() {
    return {
      tagsLists:this.tagsList
    }
  },
  watch:{
    tagsList(val){
      this.tagsLists = val
      console.log(val)
    }
  },
  created() {
    var list = this.tagsLists
    //this.tagsLists = this.tagsLists
    // if(Array.isArray(list)){
    //   var arr = []
    //   list.map(item=>{
    //     if(item.tagName){
    //     arr[0]={[item.tagName]: []}
    //     tagsObjSwitch(item.tags).map(ylis=>{
    //       arr[0][item.tagName].push(ylis)
    //     })
    //     }
    //   })
    //   this.tagsLists = arr
    // }
  },
  methods:{
    delTags(item,index,arr,k,j){
      this.tagsLists[j][k].splice(index,1)
      this.$set(this.tagsLists,j, this.tagsLists[j])
      console.log("k",this.tagsLists[j],item,index,arr,k,j)
      this.$emit('delCanback',{tagList:this.tagsLists,id:this.id,index,arr,k,j})
    },
    editTagList(tagkey ,k ,i,j){
     //this.$emit('update:dialogVisible',true)
     this.$emit('editTagList',{tagkey ,k ,i,j})
    },
    delTagList(item ,k ,i,j){
     delete this.tagsLists[j][k]
     this.$set(this.tagsLists,j, this.tagsLists[j])
     this.$emit('delCanback',{tagList:this.tagsLists,id:this.id,k ,i,j})
    }
  }
}

</script>

<style lang="scss" scoped>
.yesTags{
  max-width: 936px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  padding: 17px 20px;
  margin-bottom: 18px;
  overflow: hidden;
  .title{
    float: left;
    vertical-align: top;
    display: inline-block;
    width: 68px;
    line-height: 20px;
    font-size: 12px;
  }
  .tags{
    float: left;
    width: auto;
    display: inline-block;
    .tag{
      display: inline-block;
      color: rgba(0,0,0,0.45);
      vertical-align: center;
      margin: 0 10px;
      .tag-name{
        display: inline-block;
        font-size: 12px;
      }
      .tag-close{
        display: inline-block;
        border:1px solid rgba(0,0,0,0.45);
        border-radius: 50%;
        width: 13px;
        height: 13px;
        line-height: 11px;
        font-size: 10px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }
  .tag-btn{
    float: right;
    display: inline-block;
    vertical-align: top;
    width: 60px;
    div{
      display: inline-block;
      width: 28px;
      font-size: 14px;
      cursor: pointer;
    }
    .update{
      color: #54B87B;
    }
    .close{
      color: red;
    }
  }
}
</style>
